<template>
  <div class="login-container">
    <el-tabs v-model="activeName" class="tab_nav">
      <!-- 用户登录界面 -->
      <el-tab-pane label="登录" class="nav_item" name="login">
        <login />
      </el-tab-pane>

      <!-- 用户注册界面 -->
      <el-tab-pane label="注册" class="nav_item" name="registration">
        <registration />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import login from "./login";
import registration from "./registration";
export default {
  components: {
    login,
    registration,
  },
  data() {
    // 注册验证
    return {
      activeName: "login",
    };
  },
  methods: {},
};
</script>

<style scoped lang="less">
.login-container {
  position: absolute;
  top: calc(50% - 200px);
  left: calc(50% - 200px);
  width: 400px;
  padding: 20px 40px;

  border-radius: 10px;

  box-shadow: 0px 3px 20px rgb(201, 201, 201);

  h2 {
    text-align: center;
  }
}
.tab_nav {
  width: 100%;
  .nav_item {
    margin-top: 30px;
    text-align: center;
    padding-right: 50px;
  }
}
</style>